<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body style="height: 50%; margin: 0">
		<div id="container" style="height: 100%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;" _echarts_instance_="ec_1510814038753">
			<div style="position: relative; overflow: hidden; width: 1920px; height: 886px; padding: 0px; 
				margin: 0px; border-width: 0px; cursor: default;"><canvas width="1920" height="886" 
					data-zr-dom-id="zr_0" style="position: absolute; left: 0px; top: 0px; width: 1000px; 
					height: 886px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
					padding: 0px; margin: 0px; border-width: 0px;"></canvas></div>
			<div style="position: absolute; display: none; border-style: solid; white-space: nowrap;
				 z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
				  background-color: rgba(50, 50, 50, 0.701961); border-width: 0px; border-color: rgb(51, 51, 51); 
				  border-radius: 4px; color: rgb(255, 255, 255); font-style: normal; font-variant: normal; 
				  font-weight: normal; font-stretch: normal; font-size: 14px; font-family: &quot;Microsoft YaHei&quot;; 
				  line-height: 21px; padding: 5px; left: 796px; top: 624px;">周三<br><span style="display:inline-block;
				  	margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#c23531;">
				  	</span>邮件营销: 101<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;
				  		background-color:#2f4554;"></span>联盟广告: 191<br><span style="display:inline-block;margin-right:5px;border-radius:10px;
				  		width:9px;height:9px;background-color:#61a0a8;"></span>视频广告: 201<br><span style="display:inline-block;margin-right:5px;
				  		border-radius:10px;width:9px;height:9px;background-color:#d48265;"></span>直接访问: 301<br><span style="display:inline-block;
				  		margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#91c7ae;"></span>搜索引擎: 901</div>
		</div>
		<script type="text/javascript" src="public/js/echarts-all-3.js"></script>
		<script type="text/javascript">
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			option = null;
			option = {
				title: {
					text: '折线图堆叠'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['年总消费金额', '年总消费金额1', '年总消费金额2', '年总消费金额3', '年总消费金额4']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['2010', '2013', '2014', '2015', '2016', '2017', '2018']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
						name: '年总消费金额',
						type: 'line',
						stack: '总量',
						data: [120, 132, 101, 134, 90, 230, 210]
					},
					{
						name: '年总消费金额1',
						type: 'line',
						stack: '总量',
						data: [220, 182, 191, 234, 290, 330, 310]
					},
					{
						name: '年总消费金额2',
						type: 'line',
						stack: '总量',
						data: [150, 232, 201, 154, 190, 330, 410]
					},
					{
						name: '年总消费金额3',
						type: 'line',
						stack: '总量',
						data: [320, 332, 301, 334, 390, 330, 320]
					},
					{
						name: '年总消费金额4',
						type: 'line',
						stack: '总量',
						data: [820, 932, 901, 934, 1290, 1330, 1320]
					}
				]
			};;
			if(option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		</script>

		<script> if (option && typeof option==="object" ) { myChart.setOption(option, true); } </script>

	</body>
</html>